<template>
	<view class="user-center">
		<!-- 用户信息区域 -->
		<view class="user-info-section" @click="handleUserInfo">
			<view class="user-avatar">
				<image class="img" v-if="userInfo.avatar" :src="hname+userInfo.avatar" mode=""></image>
				<image class="img" v-else src="@/static/images/my_avatar.png" mode=""></image>
			</view>
			<view class="user-detail">
				<text class="nickname">{{ userInfo.username || '点击登录' }}</text>
				<view v-if="userInfo.role" class="type">{{ userInfo.role==1?'认证医生':'' }}</view>
			</view>
			<uni-icons class="arrow-right" type="forward" size="30"></uni-icons>
		</view>

		<!-- 功能模块 -->
		<view class="function-modules">
			<view class="module-row">
				<view class="module-item" v-for="(item, index) in modules" :key="index" @click="navigateTo(item.path)">
					<uni-icons :type="item.icon" color="#1E90FF" size="35"></uni-icons>
					<text class="module-name">{{ item.name }}</text>
				</view>
			</view>
		</view>

		<!-- 备考计划 -->
		<view class="study-plan" @click="toPlan()">
			<view class="plan-header">
				<view class="title">备考计划</view>
				<view class="more">查看详情 <uni-icons type="forward" color="#999999" size="14"></uni-icons></view>
			</view>
			<view class="plan-content" v-if="currentPlan">
				<text class="plan-title">{{ currentPlan.title }}</text>
				<view class="progress-bar">
					<view class="progress" :style="{ width: currentPlan.progress + '%' }"></view>
				</view>
				<text class="progress-text">完成度 {{ currentPlan.progress }}%</text>
			</view>
			<view class="empty-plan" v-else>
				<text>暂无备考计划，点击制定</text>
			</view>
		</view>

		<!-- 设置入口 -->
		<view class="settings">
			<view class="setting-item" v-for="(item, index) in settingList" :key="index" @click="navigateTo(item.path)">
				<view class="item-left">
					<uni-icons :type="item.icon" size="28"></uni-icons>
					<text style="margin-left: 10rpx;">{{ item.name }}</text>
				</view>
				<text class="arrow-right">></text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getUserInfo
	} from "@/api/index.js"
	export default {
		data() {
			return {
				userInfo: {},
				currentPlan: null,
				userInfo: {}, // 用户基本信息
				hasUserInfo: false,
				hname: 'http://localhost:3000/',
				modules: [
					{
						name: '我的话题',
						icon: 'pyq',
						path: '/pages/mine/myInfo/topic'
					},
					{
						name: '我的收藏',
						icon: 'star-filled',
						path: '/pages/mine/myInfo/collect'
					},
					{
						name: '我的评论',
						icon: 'chat-filled',
						path: '/pages/mine/myInfo/comment'
					},
					{
						name: '我的消息',
						icon: 'notification-filled',
						path: '/pages/mine/myInfo/message',
					},
					// {
					// 	name: '考证搭子',
					// 	icon: 'staff-filled',
					// 	path: '/pages/mine/myInfo/partner'
					// }
				],
				settingList: [{
						name: '账号设置',
						icon: 'person',
						path: '/pages/mine/settings/editInfo'
					},
					{
						name: '医生申请',
						icon: 'personadd',
						path: '/pages/mine/settings/doctorApply'
					},
					{
						name: '关于我们',
						icon: 'help',
						path: '/pages/mine/settings/about'
					}
				]
			}
		},
		computed: {
			setPhone() {
				if (this.userInfo.phone) {
					let pre = this.userInfo.phone.slice(0, 3)
					let next = this.userInfo.phone.slice(7, 11)
					return pre + '****' + next
				}
				return ''
			}
		},
		async onLoad(options) {},
		async onShow() {
			let uInfo = uni.getStorageSync('mini-userinfo')
			console.log('?????????????????????????', uInfo.avatar);
			if (uInfo) {
				console.log('11111111111111111111111111');
				this.userInfo = uInfo
				this.hasUserInfo = true
				const userRes = await getUserInfo(this.userInfo.id)
				if (userRes.statusCode == 200) {
					// this.userInfo = userRes.data.userInfo
					this.userInfo.avatar = userRes.data.data.avatar
					this.userInfo.username = userRes.data.data.username
				}
			}
		},
		methods: {
			handleUserInfo() {
				if (!this.userInfo.id) {
					uni.navigateTo({
						url: '/pages/mine/login'
					})
					return
				}
				uni.navigateTo({
					url: '/pages/mine/settings/about'
				})
			},
			toPlan() {
				uni.navigateTo({
					url: '/pages/mine/plan/plan'
				})
			},
			navigateTo(path) {
				if (!this.userInfo.id) {
					uni.navigateTo({
						url: '/pages/mine/login'
					})
				}
				uni.navigateTo({
					url: path
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.user-center {
		min-height: 100vh;
		background: #f5f5f5;
	}

	.user-info-section {
		display: flex;
		align-items: center;
		padding: 40rpx 30rpx;
		background: linear-gradient(135deg, #67c23a, #409eff);

		.user-avatar {
			width: 120rpx;
			height: 120rpx;
			border-radius: 60rpx;
			border: 4rpx solid rgba(255, 255, 255, 0.3);
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.user-detail {
			flex: 1;
			margin-left: 20rpx;
			color: #fff;
			display: flex;

			.nickname {
				font-size: 42rpx;
				font-weight: bold;
				margin-bottom: 10rpx;
			}

			.type {
				margin-left: 10rpx;
				background: linear-gradient(135deg, #ffd700 0%, #f0c000 100%);
				color: #6b4b00;
				font-size: 24rpx;
				padding: 4rpx 12rpx;
				border-radius: 16rpx;
				border: 2rpx solid #e0b000;
				align-self: center;
				box-shadow: inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3), 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
			}

			.user-desc {
				font-size: 24rpx;
				opacity: 0.8;
			}
		}
	}

	.function-modules {
		margin: 20rpx;
		padding: 30rpx 16rpx;
		background: #fff;
		border-radius: 12rpx;

		.module-row {
			display: flex;
			flex-wrap: wrap;

			.module-item {
				width: 25%;
				display: flex;
				justify-content: center;
				flex-direction: column;
				align-items: center;

				.module-icon {
					width: 80rpx;
					height: 80rpx;
					margin-bottom: 10rpx;
				}

				.module-name {
					font-size: 24rpx;
					color: #333;
				}

				.badge {
					position: absolute;
					top: -10rpx;
					right: 20rpx;
					background: #ff6b6b;
					color: #fff;
					font-size: 20rpx;
					padding: 2rpx 10rpx;
					border-radius: 20rpx;
				}
			}
		}
	}

	.study-plan {
		margin: 20rpx;
		padding: 30rpx;
		background: #fff;
		border-radius: 12rpx;

		.plan-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;

			.title {
				font-size: 32rpx;
				font-weight: bold;
			}

			.more {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: #999999;
			}
		}

		.plan-content {
			.plan-title {
				font-size: 28rpx;
				color: #333;
				margin-bottom: 20rpx;
			}

			.progress-bar {
				height: 10rpx;
				background: #eee;
				border-radius: 5rpx;
				margin-bottom: 10rpx;

				.progress {
					height: 100%;
					background: #67c23a;
					border-radius: 5rpx;
				}
			}

			.progress-text {
				font-size: 24rpx;
				color: #999;
			}
		}

		.empty-plan {
			text-align: center;
			padding: 120rpx 0;

			text {
				font-size: 28rpx;
				color: #999;
			}
		}
	}

	.settings {
		margin: 20rpx;
		background: #fff;
		border-radius: 12rpx;

		.setting-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx;
			border-bottom: 1rpx solid #eee;

			&:last-child {
				border-bottom: none;
			}

			.item-left {
				display: flex;
				align-items: center;

				.setting-icon {
					width: 40rpx;
					height: 40rpx;
					margin-right: 20rpx;
				}
			}
		}
	}

	.arrow-right {
		color: rgba(255, 255, 255, 0.8);
		font-size: 32rpx;
	}
</style>